<template>
    <div class="description">
        {{ Options.description }}
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a-tooltip>
            <template #title>查看代码</template>
            <a href="javascript:;" @click="emit('lookTopicCode', Options.id)">
                <EyeOutlined />
            </a>
        </a-tooltip>
    </div>
    <a-row :gutter="[8, 8]">
        <a-col :span="6" v-for="item in Options.users">
            <a-card size="small">
                <template #title>{{ item.nickname }}</template>
                <template #extra>
                    <a-tooltip v-if="item.totalPoints">
                        <template #title>查看代码</template>
                        <a href="javascript:;" @click="emit('lookUserCode', item.id)">
                            <EyeOutlined />
                        </a>
                    </a-tooltip>
                    <a-tag v-else color="error">未完成</a-tag>
                </template>
                <InspectChartVue :ChartData="item" />
            </a-card>
        </a-col>
    </a-row>
</template>
<script lang="ts" setup>
import InspectChartVue from '../1_home/InspectChart.vue';
import { EyeOutlined } from '@ant-design/icons-vue'

const emit = defineEmits(['lookTopicCode', 'lookUserCode'])
const props = defineProps({
    Options: {
        default: () => {
            return {
                title: '',
                description: '',
                id: '',
                users: [] as any,
            }
        }
    },
});

</script>
<style lang="less" scoped>
.description {
    padding: 0 0 20px 0;
}
</style>